import React from 'react';
import Header from './components/header';
import Player from './page/Player';
import MusicList from './page/musiclist';
import {MUSIC_LIST} from './config/musicList';
import { Router,IndexRoute,Link,Route,hashHistory } from 'react-router';
import Pubsub from 'pubsub-js';

let App = React.createClass({
	getInitialState(){
		return {
			musicList:MUSIC_LIST,
			currentMusicItem:MUSIC_LIST[0]
		}
	},

	playMusic(musicItem){
		$("#player").jPlayer('setMedia',{
			mp3:musicItem.file
		}).jPlayer('play');
		this.setState({
			currentMusicItem:musicItem
		})
	},

	playNext(type="next"){
		let index = this.findMusciItemIndex(this.state.currentMusicItem);
		let newIndex = null;
		let musicListLength = this.state.musicList.length;
		if(type === "next"){
			newIndex = (index + 1) % musicListLength;
		}else{
			newIndex = (index - 1 + musicListLength) % musicListLength;
		}
		
		this.playMusic(this.state.musicList[newIndex])
	},

	findMusciItemIndex(musicItem){
		return this.state.musicList.indexOf(musicItem);
	},

	componentDidMount(){//组件渲染后执行
		$("#player").jPlayer({
			supplied:'mp3',
			wmode:'window'
		});
		this.playMusic(this.state.currentMusicItem);
		$("#player").bind($.jPlayer.event.ended,(e) => {
			this.playNext();
		})

		Pubsub.subscribe('PLAY_MUSIC',(msg,musicItem) => {
			this.playMusic(musicItem)
		});
		Pubsub.subscribe('DEL_MUSIC',(msg,musicItem) => {
			this.setState({
				musicList:this.state.musicList.filter(item => {
					return item != musicItem;
				})
			})
		});
		Pubsub.subscribe('PLAY_PREV',() => {
			this.playNext("prev");
		});
		Pubsub.subscribe('PLAY_NEXT',() => {
			this.playNext("next");
		});
	},
	componentWillUnmount(){//销毁组件，解绑事件
		Pubsub.unsubscribe('DEL_MUSIC');
		Pubsub.unsubscribe('PLAY_MUSIC');
		Pubsub.unsubscribe('PLAY_PREV');
		Pubsub.unsubscribe('PLAY_NEXT');
		$("#player").unbind($.jPlayer.event.ended)
	},
	

	render(){
		return (
			<div>
				<Header />
				{React.cloneElement(this.props.children,this.state)}
			</div>
			
		)
	}
})
let Root = React.createClass({
	render(){
		return(
			<Router history={hashHistory}>
				<Route path="/" component={App}>
					<IndexRoute component={Player}></IndexRoute>
					<Route path="/list" component={MusicList}></Route>
				</Route>
			</Router>
		)
		
	}
})

export default Root;